<template>
  <div class="bar-chart-wrapper">
    <!-- <button type="button" @click="refreshData">刷新</button> -->
    <BaseEcharts :chartData="realTimeData" ref="bar" height="200px" />
  </div>
</template>

<script>
import BaseEcharts from './echart.vue'
import dayjs from 'dayjs'
export default {
  name: 'BoxRightC',
  components: {
    BaseEcharts
  },
  data() {
    return {
      barData: [
        { label: '亿联', curMonth: 157000, lastMonth: 112000 },
        { label: '联达兴', curMonth: 35000, lastMonth: 38000 },
        { label: '海外', curMonth: 242000, lastMonth: 205000 },
        { label: '烽火通信', curMonth: 205000, lastMonth: 150000 },
        { label: '惠尔丰', curMonth: 68000, lastMonth: 86000 },
        { label: '新大陆', curMonth: 140000, lastMonth: 117000 }
      ],
      realTimeData: [],
      intervalIns: null
    }
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      this.intervalIns && clearInterval(this.intervalIns)
      this.getRealTimeData()
      this.intervalIns = setInterval(this.getRealTimeData.bind(this), 1000 * 60 * 60 * 12)
    },
    getRealTimeData() {
      const curDate = dayjs().date()
      const daysInMonth = dayjs().daysInMonth()
      this.realTimeData = this.barData.map(item => {
        const todayData = this.toFixed((item.curMonth / daysInMonth) * curDate, 0)
        const curMonthWNum = this.toFixed(todayData / 10000, 1)
        const lastMonthWNum = this.toFixed(item.lastMonth / 10000, 1)
        return {
          ...item,
          curMonth: todayData,
          curMonthWNum,
          curMonthWUnit: curMonthWNum + '万',
          lastMonthWNum,
          lastMonthWUnit: lastMonthWNum + '万'
        }
      })
    },
    getValueByMinute({ maxValue }) {
      const minuteNow = dayjs().minute()
      const minuteVal = (maxValue / 60) * minuteNow
      return isNaN(minuteVal) ? 0 : +this.toFixed(minuteVal, 0)
    },
    toFixed(n, fixedNum = 2) {
      return ~~(Math.pow(10, fixedNum) * n) / Math.pow(10, fixedNum)
    }
  },
  destroyed() {
    clearInterval(this.intervalIns)
  }
}
</script>

<style scoped></style>
